<?php
    $this->widget('ext.editor.CodeMirror.CodeMirrorWidget',array(
        'id'=>'Code_html',
        'syntax'=>array('clike','php','js','css','xml'),
        'theme'=>'ambiance'
    ));
    $this->widget('ext.idTabs.idTabsWidget');
?>

    <div class="idTabs" style="padding:0;margin:5px 0;">
      <ul>
        <li><a href="#html_editor">HTML</a></li>
        <li><a href="#css_editor">CSS</a></li>
        <!-- Try adding this <br/> tag here -->
        <li><a href="#js_editor">Javascript</a></li>
      </ul>
      <div class="items clear">    
        <div id="html_editor"><textarea id="Html_code" name="code" ></textarea></div>
        <div id="css_editor"><textarea id="Css_code"></textarea></div>
        <div id="js_editor"><textarea id="Js_code"></textarea></div>
      </div>
    </div>
    <div class="form">
        <div class="row">
            <input type="text" id="demoTitle" value="此处写下标题" onfocus="this.value=''" />
        </div>
        <textarea id="demoDescription" style="width: 100%;height:150px;" onfocus="this.value=''">此处留下相关描述</textarea>
        <button onclick="createDemo();">Submit</button>
    </div>
    
  <script>

    
    var html_editor = CodeMirror.fromTextArea(document.getElementById("Html_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:{name:"xml",alignCDATA:true},
      height:600,
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F9": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    var js_editor = CodeMirror.fromTextArea(document.getElementById("Js_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:'javascripte',
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F10": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    var css_editor = CodeMirror.fromTextArea(document.getElementById("Css_code"), {
      lineNumbers: true,
      theme: "ambiance",
      mode:'css',
      onChange:function(){
        updatePreview();
      },
      extraKeys: {
        "F11": function(cm) {
          setFullScreen(cm, !isFullScreen(cm));
        },
        "Esc": function(cm) {
          if (isFullScreen(cm)) setFullScreen(cm, false);
        }
      }
    });
    
    function updatePreview() {    	
        var previewFrame = document.getElementById('preview');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        
        preview.open();
        preview.write(html_editor.getValue());
        preview.close();    
       
//    	parallax.loadScript.cssFile('/public/css/main',preview,'css_file');
    	parallax.loadScript.css(css_editor.getValue(),preview,'css_code');
    	parallax.loadScript.jsFile('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min', preview, 'js_file');
    	parallax.loadScript.js(js_editor.getValue(),preview, 'js_code');
    	
    	preview.appendChild(head);	
    	
    
    }   
    
    function createDemo(){
        var data = {
            'Article':{
              'arc_title':$("#demoTitle").val(),
              'arc_isrecommend':'<?php echo Article::RECOMMEND_ALLOW; ?>',
              'arc_state':'<?php echo Article::STATUS_PUBLISHED; ?>',
              'arc_iscomment':'<?php echo Article::COMMENT_ALLOW; ?>',
              'arc_cid':'<?php echo $_GET['id']; ?>',
              'arc_content':{
                  'js':js_editor.getValue(),
                  'css':css_editor.getValue(),
                  'html':html_editor.getValue(),
                  'description':$("#demoDescription").val()
              }                
            }

            
        };
        
        $.post("<?php echo $this->createUrl('cdemo'); ?>",data,function(){
           alert(data); 
        });
    }
        
 	$(function(){
		$(".idTabs").idTabs(true,location.hash);
	});
    
  </script>